<template>
  <div class="login-page">
    <div>
      <img class="logo" src="@/assets/Blue_circled_9.png" />
      <h3 class="welcome">欢迎登录⑨Blog</h3>
    </div>
    <div class="login-pannel">
      <div class="avatar">
        <img src="@/assets/ciruno.jpg" class="avatar-img" />
      </div>
      <el-form label-width="80px" class="login-form">
        <el-form-item label="用户名">
          <el-input
            prefix-icon="el-icon-user"
            v-model="username"
            placeholder="请输入用户名"
            class="username-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            v-model="password"
            placeholder="请输入密码"
            class="password-input"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <div class="buttons">
          <el-button class="login-button" type="primary" @click="login"
            >登录</el-button
          >
          <router-link class="register-link" to="/register">注册</router-link>
        </div>
        <router-link class="back-to-index" to="/">←返回主页</router-link>
      </el-form>
    </div>
  </div>
</template>

<script>
import { api } from "@/api";
import { StoreHandler } from "@/store";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async login() {
      try {
        let isLogin = StoreHandler.getters.getUserInfo();
        if (isLogin !== null) {
          this.$alert("不可以重复登录!");
          return;
        }
        await this.$axios(api.user.login(this.username, this.password));
        await this.$alert("登录成功");
        StoreHandler.setters.setAvatarUrl(
          "/api/" + api.user.getAvatar().url + `?${Math.random()}`
        );
        this.$router.push("/");
      } catch (error) {
        if (error.response.data.status == 404) {
          this.$alert("用户不存在!");
        } else if (error.response.data.status == 401) {
          this.$alert("密码错误!");
        } else {
          this.$alert(error.response.data.message);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login-page {
  margin: 0 auto;
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  .login-pannel {
    margin: 20px 0;
    width: 480px;
    height: 360px;
    background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
    .login-form {
      padding-top: 30px;
      margin: 0 auto;
      .username-input {
        width: 350px;
      }
      .password-input {
        width: 350px;
      }
      .buttons {
        width: 120px;
        margin: 0 auto;
        .login-button {
          width: 100%;
        }
        .register-link {
          margin-left: 36.5%;
          text-decoration: none;
          color: rgb(255, 255, 255);
        }
      }
      .back-to-index {
        margin: 0 0 20px 20px;
        text-decoration: none;
        color: gray;
      }
    }
    .avatar {
      margin: 0 auto;
      margin-top: 5px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .logo {
    justify-content: center;
    padding: 0 50px;
    margin: 20px 0;
    width: 160px;
    height: 160px;
  }
  .welcome {
    margin: 0 auto;
    font-size: 36px;
    color: white;
  }
}
</style>
<style>
body {
  margin: 0 auto;
}
</style>
